<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>生日管理</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui-list-swipe.css" />
	<style type="text/css">
		body {
			background-color: #F5F5F5;
		}

		.birthday-list {
			height: 2.5rem;
			line-height: 2.5rem;
			position: relative;
			overflow: hidden;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-touch-callout: none;
		}

		.aui-text-left {
			float: left;
		}

		img {
			display: inline-block;
			vertical-align: middle;
		}

		.aui-swipe-right-btn {
			/*padding: 0 20px;*/
			background: #FF1E1E;
			color: #ffffff;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="ming-bg-white aui-padded-l-10 aui-padded-r-10 birthday-list">
			<div class="aui-text-left aui-text-linear" style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
				<!-- 我的生日 -->
				出生日期
			</div>
			<div class="aui-text-right" tapmode @click="sel_date">
				<span class="ming-text-hui aui-font-size-14">
							{{info.birthday==''?'未设置':info.birthday}}
					</span>
				<img src="../../image/btn/btn-right.png" / style="height: 1rem;">
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var swipe;
	var vm = new Vue({
		el: "#app",
		data: {
			info: {}
		},
		methods: {
			get_list: function() {
				get_data('api/User/birthdayList', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.info = ret.data
					}
				})
			},
			sel_date: function() {
				if (api.systemType == 'ios') {
					api.openPicker({
						type: 'date',
						title: '选择日期'
					}, function(ret, err) {
						if (ret) {
							var str = ret.year + '-' + ret.month + '-' + ret.day;
							vm.info.birthday = str;
							get_data('api/user/updateUserInfo', {
								token: $api.getStorage('token'),
								birthday: str
							}, function(ret) {
								if (ret.status) {}
							})
						} else {
							console.log(JSON.stringify(err));
						}
					});
				} else {
					var actionDialog = api.require('UIActionDialog');
					actionDialog.datePicker({
						styles: {
							navigator: {
								h: 55,
								divider: '#696969',
								dividerSize: 0.3,
								titleColor: '#000000',
								title: '出生日期',
								divider: '#EEEEEE',
								bg: '#FFFFFF',
								dividerSize: 0.3,
								titleSize: 17,
							},
							leftBtn: {
								title: '取消',
								bg: '#FFFFFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
								titleSize: 15, //（可选性）数字类型；按钮标题文本字体大小；默认：12
								titleColor: '#999999', //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
							},
							rightBtn: {
								title: '完成',
								bg: '#FFFFFF', //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
								titleSize: 15, //（可选性）数字类型；按钮标题文本字体大小；默认：12
								titleColor: '#005A93', //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
							},
							content: { //（可选项）JSON对象；选择器区域样式配置
								h: 257, //（可选项）数字类型；选择器区域的高度（从导航条下分割线到屏幕最底端的高度）；默认：220
								bg: '#FFFFFF', //（可选项）字符串类型；选择器背景，支持rgb、rgba()、#、img；默认：#F5F5F5
								size: 17, //（可选性）数字类型；滚轮显示文字大小；默认：16
								active: '#000000', //（可选项)字符串类型；滑到选中位置后的文本颜色，支持rgb、rgba、#；默认：#ff0000
								inactive: '#00000', //（可选项)字符串类型；滑到非选中位置后的文本颜色，支持rgb、rgba、#；默认：#00000
								divider: '#EEEEEE', // (可选项)字符串类型；选中项上下分隔线的颜色，支持rgb、rgba、#，不传不显示；默认：不显示
								dividerSize: 0.3, // (可选项)数字类型；选中项上下分隔线的粗细；默认：0.5
								row: 5, //（可选项）数字类型；显示几行；默认：5
								fromYears: 1919, //（可选项）数字类型；开始年份；默认：当前年份之前100年
								toYears: 2119 //（可选项）数字类型；终止年份；默认：当前年份之后100年
							}
						},
						mask: 'rgba(0,0,0,0.6)',
						selected: '2019-5-29',
						animation: true
					}, function(ret) {
						console.log(JSON.stringify(ret));
						if (ret.eventType == 'left') {
							actionDialog.close();
						} else if (ret.eventType == 'right') {
							var str = ret.selected;
							vm.info.birthday = ret.selected;
							get_data('api/user/updateUserInfo', {
								token: $api.getStorage('token'),
								birthday: str
							}, function(ret) {
								if (ret.status) {}
							})
							actionDialog.close();
						} else if (ret.eventType == 'mask') {
							actionDialog.hide();
						}
					});
				}

			}
		}
	})
	apiready = function() {
		vm.get_list()
	}
</script>

</html>
